<template>
    <div>
        <!--        <v-head></v-head>-->
        <!--        <v-menu></v-menu>-->
        <transition name="slide-fade" mode="out-in">
            <keep-alive>
                <router-view/>
            </keep-alive>
        </transition>
        <van-tabbar v-model="active" @change="onChange">
            <van-tabbar-item v-for="tab in tabs">
                <span>{{ tab.name }}</span>
                <template #icon="props">
                    <img :src="props.active ? tab.inactive : tab.active"/>
                </template>
            </van-tabbar-item>
        </van-tabbar>
        <!--        <v-foot></v-foot>-->
    </div>
</template>
<script>
// @ is an alias to /src
// import vHead from '@/views/layouts/header.vue';
// import vMenu from '@/views/layouts/menu.vue';
// import vFoot from '@/views/layouts/footer.vue';
import {mapGetters} from 'vuex';
export default {
    // components: {vHead, vMenu, vFoot},
    computed: {
        ...mapGetters(['active']),
    },
    data() {
        return {
            tabs: [{name: '医单云', active: '/img/ydy.png', inactive: '/img/ydy_active.png'},
                {name: '专家', active: '/img/zj.png', inactive: '/img/zj_active.png'},
                {name: '商城', active: '/img/shop.png', inactive: '/img/shop_active.png'},
                {name: '购物车', active: '/img/che.png', inactive: '/img/che_active.png'},
                {name: '我的', active: '/img/user.png', inactive: '/img/user_active.png'}],
        };
    },
    methods: {
        onChange(index) {
            switch (index) {
                case 1:
                    this.$router.push({name: 'Doctor'});
                    break;
                case 2:
                    this.$router.push({name: 'Shop'});
                    break;
                case 3:
                    this.$router.push({name: 'Shop'});
                    break;
                case 4:
                    this.$router.push({name: 'User'});
                    break;
                default:
                    this.$router.push({name: 'Index'});
                    break;
            }
        },
    },
}
</script>
<style>
demo {
    color: #1f8fdc;
    background: #1ea1e0;
}
</style>
